<template>
  <!-- 收货地址 -->
  <van-contact-card type="edit" :name="address.consignee" :tel="`${address.mobile} ${address.region_text} ${address.address}`" :editable="false" />
  <van-form @submit="submit">
      <div v-for="(item,key) in product" :key="key">
           <!-- 商品卡片 -->
          <van-card
            
            :title="item.product.name"
            :thumb="item.product.thumbs_text"
            :num="item.pronum"
          >
            <template #title>
              <div class="title">{{item.product.name}}</div>
            </template>

                  <!-- 卡片的插槽部分  -->
            <template #desc v-if="item.attrs">
              <van-tag v-for="(val,key) in item.attrs" :key="key" class="tag" type="primary">{{val.value}}</van-tag>
            </template>
            <template #desc v-else>
              <van-tag class="tag" type="danger">无规格数据</van-tag>
            </template>

            <template #tags>
              <div class="price">单价：￥{{ item.price }}</div>
            </template>

            <template #price>
              <div class="price">合计：￥{{ item.total}}</div>
            </template>
          </van-card>
          <div>
            <!-- 评论 -->
            <van-field
              v-model="comment[`${item.id}`]"
              rows="2"
              autosize
              label="评论"
              type="订单评论"
              maxlength="120"
              placeholder="请输入留言"
              :readonly="order.status==3?false:true"
              show-word-limit
            />
            <!-- 评分 -->
            <van-field name="rate" label="评分">
              <template #input>
                <van-rate v-model="rate[`${item.id}`]" :readonly="order.status=='3'?false:true" />
              </template>
            </van-field>



            <!-- 文件上传 -->
            <van-field name="uploader" label="评论图片">
              <template #input>
                <!-- multiple 上传多张图片 readonly只读-->
                <van-uploader v-model="thumbs[`${item.id}`]" multiple :max-count="9" :readonly="order.status==3?false:true"/>
              </template>
            </van-field>
          </div>
          <!-- 分割线 -->
          <van-divider>-------------------------------分割线----------------------------------</van-divider>
      </div>
        <!-- 提交按钮组 只有立即评价的时候显示 -->
      <div v-if="order.status == '3'" style="width:50%;margin:2em auto;">
        <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交</van-button>
      </div>
  </van-form>
 



</template>
<script setup>
  const {proxy} = getCurrentInstance()
  let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
  let product = ref([])
  let address = ref([])
  let order = ref([])
  let loading = ref(false)
  //申请退款
  let ApplyShow = ref(false);

  //评星
  let rate = ref([]);
  //评论
  let comment = ref([])
  //评论图片
  let thumbs = ref([])
  // 挂载
  onMounted(()=>{
    OrderInfo()
  })
  const OrderInfo = async () =>{
    //封装数据
    var result = await proxy.$POST({
      url:'/order/info',
      params:{orderid:orderid,busid:proxy.$business.value.id}
    })
    if(result.code == 0){
      proxy.$fail(result.msg)
      return false
    }
    //返回3个值
    //开始赋值
    address.value = result.data.address;
    product.value = result.data.product;
    order.value = result.data.order;
    result.data.product.map((item)=>{
      item.attrs = JSON.parse(item.attrs)
      if(order.value.status == '3'){
        comment.value[`${item.id}`] = '';
        rate.value[`${item.id}`] = 0;
        thumbs.value[`${item.id}`] = [];
      }else{
        var pic = [];
        item.thumbs_text.map((val)=>pic.push({url:val}))
        comment.value[`${item.id}`] = item.comment;
        rate.value[`${item.id}`] = parseInt(item.rate);
        thumbs.value[`${item.id}`] = pic
      }
    })

    return false
  }
  //提交
  const submit = async(value)=>{
    loading.value = true
    var list = [];
    //获取值 rate comment thumbs
    for(var item of product.value){
        //存入图片的数组
        var pic = [];
        if(thumbs.value[`${item.id}`] && thumbs.value[`${item.id}`].length>0){
          thumbs.value[`${item.id}`].map((val)=>{pic.push(val.file);}) //val.file 通过UPLODE方法传递值时会自动转化成地址
        }
        //封装数据
        var value = {
          id:item.id,//此id是order_product表的id
          rate:rate.value[`${item.id}`],
          thumbs:pic,//图片
          comment:comment.value[`${item.id}`],
        }
        list.push(value)
    }
    var success = 0;//成功次数
    var error = 0; //失败次数
    //执行多次评论逐次执行的方法
    for(var params of list){
        var result = await proxy.$UPLOAD({
          url:'/order/comment',
          params
        })
        if(result.code==0){
          error++;
        }else{
          success++;
        }
        proxy.$success({
          message:`成功评论 ${success} 条数据-- 失败评论 ${error} 条数据`,
          onClose:()=>proxy.$router.go(-1)
        })
    }
    loading.value = false
  }
</script>

<style scoped>
  @import url('/assets/css/OrderInfo.css');
</style>
<style>
  .OrderCode{
    word-wrap: normal;
  }
</style>